<template>
  <view class="my-orders-page">
    <!-- 订单状态选项卡 -->
    <view class="order-tabs">
      <view 
        v-for="(tab, index) in tabs" 
        :key="index"
        class="order-tab"
        :class="{'order-tab--active': activeTabIndex === index}"
        @click="switchTab(index)"
      >
        {{ tab.name }}
      </view>
    </view>
    
    <!-- 订单列表 -->
    <view class="order-list" v-if="!loading && filteredOrders.length > 0">
      <service-order-item 
        v-for="order in filteredOrders" 
        :key="order.id"
        :order="order"
        @click="goToOrderDetail"
        @cancel="handleCancelOrder"
        @pay="handlePayOrder"
        @confirm="handleConfirmOrder"
        @review="goToReviewOrder"
        @again="handleOrderAgain"
        @delete="handleDeleteOrder"
      />
    </view>
    
    <!-- 加载中 -->
    <view v-else-if="loading" class="order-empty">
      <text class="order-empty__text">加载中...</text>
    </view>
    
    <!-- 无订单 -->
    <view v-else class="order-empty">
      <image class="order-empty__image" src="https://picsum.photos/seed/empty/200/200" mode="aspectFit" />
      <text class="order-empty__text">暂无相关订单</text>
      <view class="order-empty__action">
        <button class="order-empty__btn" @click="goToServiceHome">去查看服务</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import ServiceOrderItem from '@/components/service/ServiceOrderItem.vue';

// 标签页
const tabs = [
  { name: '全部', status: 'all' },
  { name: '待支付', status: 'pending' },
  { name: '服务中', status: 'processing' },
  { name: '已完成', status: 'completed' },
  { name: '已取消', status: 'cancelled' }
];

// 当前选中的标签索引
const activeTabIndex = ref(0);

// 加载状态
const loading = ref(false);

// 订单列表
const orders = ref([
  {
    id: 1001,
    orderNo: 'FW20250429152533',
    createTime: '2025-04-29 15:25:33',
    status: 'processing', // pending(待支付), processing(进行中), completed(已完成), cancelled(已取消)
    paymentMethod: '微信支付',
    service: {
      id: 1,
      title: '快递代拿服务',
      option: '普通件 (2kg以内)',
      price: '¥5.00',
      quantity: 1,
      image: 'https://picsum.photos/seed/service1/300/200'
    },
    price: {
      service: 5.00,
      delivery: 2.00,
      discount: 2.00,
      total: 5.00
    },
    reviewed: false
  },
  {
    id: 1002,
    orderNo: 'FW20250429101215',
    createTime: '2025-04-29 10:12:15',
    status: 'pending',
    paymentMethod: '待支付',
    service: {
      id: 2,
      title: '远程打印服务',
      option: '黑白打印 单面',
      price: '¥0.5/页',
      quantity: 10,
      image: 'https://picsum.photos/seed/service2/300/200'
    },
    price: {
      service: 5.00,
      delivery: 1.00,
      discount: 0.00,
      total: 6.00
    },
    reviewed: false
  },
  {
    id: 1003,
    orderNo: 'FW20250428183022',
    createTime: '2025-04-28 18:30:22',
    status: 'completed',
    paymentMethod: '微信支付',
    service: {
      id: 3,
      title: '刷乐跑跑腿服务',
      option: '2公里以内',
      price: '¥8/公里',
      quantity: 1,
      image: 'https://picsum.photos/seed/service3/300/200'
    },
    price: {
      service: 16.00,
      delivery: 0.00,
      discount: 3.00,
      total: 13.00
    },
    reviewed: true
  },
  {
    id: 1004,
    orderNo: 'FW20250427092533',
    createTime: '2025-04-27 09:25:33',
    status: 'cancelled',
    paymentMethod: '未支付',
    service: {
      id: 1,
      title: '快递代拿服务',
      option: '大件 (5-10kg)',
      price: '¥8.00',
      quantity: 1,
      image: 'https://picsum.photos/seed/service1/300/200'
    },
    price: {
      service: 8.00,
      delivery: 2.00,
      discount: 0.00,
      total: 10.00
    },
    reviewed: false
  }
]);

// 根据当前标签过滤订单
const filteredOrders = computed(() => {
  const status = tabs[activeTabIndex.value].status;
  if (status === 'all') {
    return orders.value;
  }
  return orders.value.filter(order => order.status === status);
});

// 页面加载
onMounted(() => {
  // 获取URL参数判断是否需要切换标签
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const options = currentPage.options;
  
  if (options && options.status) {
    const index = tabs.findIndex(tab => tab.status === options.status);
    if (index !== -1) {
      activeTabIndex.value = index;
    }
  }
  
  // 获取订单列表
  fetchOrderList();
});

// 获取订单列表
const fetchOrderList = () => {
  loading.value = true;
  
  // 模拟API请求
  setTimeout(() => {
    loading.value = false;
    // 实际项目中应该从API获取数据更新orders.value
    console.log('获取订单列表完成');
  }, 500);
};

// 切换标签
const switchTab = (index) => {
  if (index === activeTabIndex.value) {
    return;
  }
  
  activeTabIndex.value = index;
  fetchOrderList();
};

// 跳转到订单详情
const goToOrderDetail = (orderId) => {
  uni.navigateTo({
    url: `/pages/service/order-detail?id=${orderId}`
  });
};

// 去评价
const goToReviewOrder = (orderId) => {
  uni.navigateTo({
    url: `/pages/service/review?orderId=${orderId}`
  });
};

// 取消订单
const handleCancelOrder = (orderId) => {
  uni.showModal({
    title: '提示',
    content: '确定要取消该订单吗？',
    success: (res) => {
      if (res.confirm) {
        // 实际项目中应该调用API取消订单
        // 这里仅做模拟
        const index = orders.value.findIndex(order => order.id === orderId);
        if (index !== -1) {
          orders.value[index].status = 'cancelled';
        }
        
        uni.showToast({
          title: '订单已取消',
          icon: 'success'
        });
      }
    }
  });
};

// 支付订单
const handlePayOrder = (orderId) => {
  uni.showLoading({
    title: '正在支付...'
  });
  
  // 模拟支付过程
  setTimeout(() => {
    uni.hideLoading();
    
    // 实际项目中应该调用支付API
    // 这里仅做模拟
    const index = orders.value.findIndex(order => order.id === orderId);
    if (index !== -1) {
      orders.value[index].status = 'processing';
    }
    
    uni.showToast({
      title: '支付成功',
      icon: 'success'
    });
  }, 1500);
};

// 确认完成
const handleConfirmOrder = (orderId) => {
  uni.showModal({
    title: '提示',
    content: '确认服务已完成吗？',
    success: (res) => {
      if (res.confirm) {
        // 实际项目中应该调用API确认完成
        // 这里仅做模拟
        const index = orders.value.findIndex(order => order.id === orderId);
        if (index !== -1) {
          orders.value[index].status = 'completed';
        }
        
        uni.showToast({
          title: '确认完成',
          icon: 'success'
        });
      }
    }
  });
};

// 再次购买
const handleOrderAgain = (order) => {
  uni.navigateTo({
    url: `/pages/service/detail?id=${order.service.id}`
  });
};

// 删除订单
const handleDeleteOrder = (orderId) => {
  uni.showModal({
    title: '提示',
    content: '确定要删除该订单吗？删除后将无法恢复。',
    success: (res) => {
      if (res.confirm) {
        // 实际项目中应该调用API删除订单
        // 这里仅做模拟
        const index = orders.value.findIndex(order => order.id === orderId);
        if (index !== -1) {
          orders.value.splice(index, 1);
        }
        
        uni.showToast({
          title: '删除成功',
          icon: 'success'
        });
      }
    }
  });
};

// 去服务首页
const goToServiceHome = () => {
  uni.switchTab({
    url: '/pages/service/index'
  });
};
</script>

<style lang="scss" scoped>
.my-orders-page {
  min-height: 100vh;
  background-color: #f7f8fa;
}

.order-tabs {
  display: flex;
  background-color: #ffffff;
  padding-bottom: 10px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.order-tab {
  flex: 1;
  height: 44px;
  line-height: 44px;
  text-align: center;
  font-size: 14px;
  color: #666;
  position: relative;
  
  &--active {
    color: #07c160;
    font-weight: 500;
    
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 20px;
      height: 3px;
      background-color: #07c160;
      border-radius: 2px;
    }
  }
}

.order-list {
  padding: 10px;
}

.order-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 100px;
  
  &__image {
    width: 120px;
    height: 120px;
    margin-bottom: 20px;
  }
  
  &__text {
    font-size: 15px;
    color: #999;
    margin-bottom: 30px;
  }
  
  &__action {
    
  }
  
  &__btn {
    background-color: #07c160;
    color: #ffffff;
    font-size: 14px;
    padding: 0 30px;
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
  }
}
</style>
